<template>
  <!-- <div class="my"> -->
    <!-- <div class="myinfo">
      <img @click="toLogin" :src="avator" alt="">
      <div @click="toLogin">
        <p>{{userInfo.nickName}}</p>
        <p v-if="userInfo.nickname">点击登录</p>
        <p v-else>微信用户</p>
      </div>
    </div> -->
    <!-- <div class="iconlist">
      <div @click="goTo(item.url)" v-for="(item, index) in listData" :key="index">
        <span class="iconfont" :class="item.icon"></span>
        <span>{{item.title}}</span>
      </div>
    </div> -->
  <!-- </div> -->



  
 <div class="my">
    <div class="myinfo">
      <open-data type="userAvatarUrl" class="img"></open-data>
      <!-- <img  :src="userInfo.avatarUrl" alt=""> -->
      <div v-if="isLogin">
        
        <p>{{userInfo.nickName}}</p>
        <!-- <p v-if="userInfo.nickname">点击登录</p>
        <p v-else>微信用户</p> -->
        <button   v-on:click="loginOut" type="primary">退出</button>
      </div>
      <div v-else>
        <button  @click="toLogin" type="primary">登录</button>
      </div>
    </div>
    <div class="iconlist">
      <div @click="goTo(item.url)" v-for="(item, index) in listData" :key="index">
        <span class="iconfont" :class="item.icon"></span>
        <img :src="item.icon" class="iconlist-icon">
        <span>{{item.title}}</span>
        <img src="/static/images/arrow-right.png" class="iconList-right">
      </div>
    </div>
  </div>
   




  
</template>

<script>

export default {
    onShow() {
      try {
        //先判断缓存中是否有用户信息，如果有就是已登录，如果没有则未登录
        const value = wx.getStorageSync('userInfo')
        if (value) {
          // Do something with return value
          //  console.log("已登录");
          //将缓存中的信息赋值给userInfo,登录状态改为true
         this.userInfo = value;
         this.isLogin = true;
        //  console.log(this.isLogin)
        } else{
            // console.log("未登录，请登录");
            // console.log(this.isLogin);
            // hhhhhh
        }
      } catch (e) {
          // Do something when catch error
          console.log(error)
      }
    },
    created() {},
    mounted() {},
    data() {
      return {
        avator: "",
        allcheck: false,
        //登录状态
        isLogin:false,
        listData: [],
        Listids: [],
        //用户信息
        userInfo: {},
        listData: [{
            title: "我的订单",
            icon: "/static/images/order/my-order.png",
            url: "/pages/myOrder/main"
          },
          // {
          //   title: "我的足迹",
          //   icon: "icon-zuji",
          //   url: ""
          // },
          {
            title: "我的收藏",
            icon: "/static/images/more/wodeshoucang.png",
            url: "/pages/collectlist/main"
          },
          {
            title: "地址管理",
            icon: "/static/images/more/dizhiguanli.png",
            url: "/pages/address/main"
          },
          // {
          //   title: "联系客服",
          //   icon: "icon-lianxikefu",
          //   url: ""
          // },
          {
            title: "意见反馈",
            icon: "/static/images/more/yijianfankui.png",
            url: "/pages/feedback/main"
          }
        ]
      };
    },
    components: {},
    methods: {
      // 跳转到登录页面
      toLogin() {
          wx.navigateTo({
            url: "/pages/login/main"
          });
      },
      // 退出登录
       loginOut() {
        // 清除缓存
         wx.clearStorage();
        //将登录状态该为false
         this.isLogin=false;
       
      },
      //跳转到对应页面
      goTo(url) {
          wx.navigateTo({
            url: url
          });
      },

    },
    
   
    computed: {}
  };






  // import {
  //   get,
  //   toLogin,
  //   login
  // } from "../../utils";
  // export default {
  //   onShow() {
      // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
    //   if (login()) {
    //     this.userInfo = login();
    //     console.log(this.userInfo);
    //     this.avator = this.userInfo.avatarUrl;
    //   }
    // },
    // created() {},
    // mounted() {},
    // data() {
    //   return {
    //     avator: "http://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png",
    //     allcheck: false,
    //     listData: [],
    //     Listids: [],
    //     userInfo: {},
    //     listData: [{
    //         title: "我的订单",
    //         icon: "icon-unie64a",
    //         url: ""
    //       },
          // {
          //   title: "优惠券",
          //   icon: "icon-youhuiquan",
          //   url: ""
          // },
          // {
          //   title: "我的足迹",
          //   icon: "icon-zuji",
          //   url: ""
          // },
  //         {
  //           title: "我的收藏",
  //           icon: "icon-shoucang",
  //           url: "/pages/collectlist/main"
  //         },
  //         {
  //           title: "地址管理",
  //           icon: "icon-dizhiguanli",
  //           url: "/pages/address/main"
  //         },
  //         {
  //           title: "联系客服",
  //           icon: "icon-lianxikefu",
  //           url: ""
  //         },
  //         {
  //           title: "帮助中心",
  //           icon: "icon-bangzhuzhongxin",
  //           url: ""
  //         },
  //         {
  //           title: "意见反馈",
  //           icon: "icon-yijianfankui",
  //           url: "/pages/feedback/main"
  //         }
  //       ]
  //     };
  //   },
  //   components: {},
  //   methods: {
  //     goTo(url) {
  //       if (toLogin()) {
  //         wx.navigateTo({
  //           url: url
  //         });
  //       }
  //     },
  //     toLogin() {
  //       if (!this.userInfo.avatarUrl) {
  //         wx.navigateTo({
  //           url: "/pages/login/main"
  //         });
  //       }
  //     }
  //   },
  //   computed: {}
  // };

</script>
<style lang='scss' scoped>
  // @import "./style";
  .my .myinfo {
    width: 100%;
    height: 280rpx;
    display: flex;
    align-items: center;
    background:#F2F2F2;
    padding: 0 30rpx;
    box-sizing: border-box;
 }
    .img {
      height: 148rpx;
      width: 148rpx;
      border-radius: 50%;
      overflow: hidden;
    }
   .myinfo div {
      margin-left: 30rpx;
   }
     .myinfo div p {
        color: rgb(7, 7, 7);
        font-size: 30rpx;
        margin-bottom: 10rpx;
        
      }
      .myinfo div button {
        width: 100rpx;
        height: 50rpx;
        font-size: 20rpx;
        border-radius: 10rpx;
      }
     .myinfo p:nth-child(2) {
        font-size: 28rpx;
      }
    .my .iconlist {
    display: flex;
    /* align-items: center; */
    background: #fff;
    flex-wrap: wrap;
    background: #F2F2F2;
    border-bottom: 20rpx solid#f2f2f2;
  }
    .iconlist div {
      width: 100%;
      height:50rpx;
      padding: 25rpx 10rpx;
      margin-top: 10rpx;
      background: white;
      

      /* text-align: center; */
      /* border: 1rpx solid rgba(0, 0, 0, .15); */
      border-bottom: 1rpx solid rgba(0, 0, 0, .15);
      /* box-sizing: border-box; */
    }
    .iconlist-icon {
      width: 40rpx;
      height:40rpx;
    }
    /* 跳转页面的小箭头 */
    .iconList-right {
     width: 25rpx;
     height: 25rpx;
    }
  
    .iconlist div span {
        /* display: block; */
        font-size: 40rpx;
        letter-spacing: 5rpx;
        margin-left: 10rpx;
      }
     .iconlist div span:nth-child(1) {
        margin-bottom: 10rpx;
      }
   
    /* div:nth-child(3n+3) {
      border-right: none;
    } */
    /* div:nth-last-child(1) {
      border-bottom: none;
    }
    div:nth-last-child(2) {
      border-bottom: none;
    } */

</style>
